<template>
  <div style="background: url(/static/houtai/img/bg.jpg);background-size: cover" class="body">
    <div id="kv2jbf78">
      <form qw-c="form" action="#" method="post">
        <div class="form-group">
          <input maxlength="-1" class="form-control" placeholder="请输入用户名" name="username" qw-c="username" type="text">

        </div>

        <div class="form-group" qw-c="passwordcomponent">
          <input maxlength="-1" class="form-control" placeholder="请输入密码" name="password" type="password"
                 qw-c="password">
          <i class="fa fa-lock icon"></i>
        </div>
        <div class="form-group" qw-c="passwordcomponent"><input maxlength="-1" class="form-control" placeholder="请确认密码"
                                                                name="repassword" type="password" qw-c="password"> <i
          class="fa fa-lock icon"></i></div>


        <div class="form-group">
          <select class="form-control" qw-c="identity" name="identity">
            <option>家族</option>
          </select>
          <i class="fa fa-id-card icon"></i>
        </div>
        <div class="form-group">
          <button type="button" @click="registact" class="btn btn-primaryy" style="margin-left: 0;">注册</button>
        </div>
        <div qw-c="infotext" id="dmtext">
          已有账号，点击<a href="/#/Login">登录</a>
        </div>
      </form>
    </div>


  </div>
</template>
<script>
import Htmenu from "./Htmenu.vue";

export default {
  name: "Regist",
  components: {Htmenu},
  data() {
    return {
      identity: "",
      userinfo: {},
    }
  },
  methods: {
    uploadfile(file, itemname, attr) {
      console.log(file)
      let _this = this;
      var forms = new FormData()
      var configs = {
        headers: {'Content-Type': 'multipart/form-data'}
      };
      forms.append('file', file.target.files[0])
      this.$axios.post("/addfilejson.action", forms, configs).then(res => {
        console.log(res);
        //$(".fileimg").attr("src","http://localhost:8080" + res.data);
        _this.$forceUpdate();
        _this[itemname][attr] = res.data;
      })
    },
    getNowTime() {
      return new Date(+new Date() + 8 * 3600 * 1000).toJSON().substr(0, 19).replace("T", " ");
    },
    serializeForm(formid) {
      var fields;
      if (formid) {
        fields = $('#' + formid).serializeArray();
      } else {
        fields = $("form").serializeArray();
      }
      var obj = {}; //声明一个对象
      $.each(fields, function (index, field) {
        obj[field.name] = field.value; //通过变量，将属性值，属性一起放到对象中
      })
      return obj;
    }, registact() {
      let _this = this;

      console.log(_this.serializeForm());
      this.$axios.post("/registactjson.action", _this.serializeForm())
        .then(res => {

          if (res.data == "请先登录") {
            this.$message({
              message: '请先登录',
              type: 'success'
            });
            _this.$router.push('/Login');
          }


          console.log(res.data);

          var obj = res.data;

          var message = obj['message'];

          if (message) {
            this.$message({
              message: message,
              type: 'success'
            });
          }

          if (message == "注册成功，请登录") {
            _this.$router.push('/Login');
          }

        })
        .catch(err => {
          console.log(err)
          this.$message({
            message: '注册失败',
            type: 'error'
          });
        })


    },
  },
  created() {

    let _this = this;
    _this.identity = window.sessionStorage.getItem("identity");
    _this.userinfo = JSON.parse(window.sessionStorage.getItem("userinfo"));

  },
  beforeCreate() {

    $("#cssdiv").html("");

   

    $("#cssdiv").html(cssstr);
    $("#jsdiv").html("");

    var jsstr = "<script src=\"/static/houtai/js/jquery.min.js\"><\/script> ";
    setTimeout(function () {
      $("#jsdiv").html(jsstr);
    }, 100);

  },
  mounted() {
    let _this = this;


    setTimeout(function () {

      if ("") {
        alert("");
      }

    }, 20)
  }
}
</script>
<style>

option {
  background: #9CBBDE !important;
}

#dmtext {
  text-align: right;
  color: white;
}

.form-group {
  position: relative;
}

.icon {
  color: white;
  position: absolute;
  left: 25px;
  top: 15px;
}

.form-control::placeholder {
  color: white !important;
}

.form-control {
  border-radius: 25px !important;
  height: 45px !important;
  line-height: 45px !important;
  background-color: rgba(255, 255, 255, 0.58) !important;
  color: white !important;
  padding: 0 50px !important;
}

.btn-primaryy {
  background: #3A62D7;
  width: 100%;
  height: 50px;
  border-color: #3A62D7;
  border-radius: 25px;
}

.form-group {
  margin-top: 10px;
}

#kv2jbf79 {
  font-size: 22px;
}

#kv2jbf78 {
  width: 400px;
  margin: auto;
  margin-top: 150px;
  min-height: 100px;
  border-radius: 5px;
  padding: 30px;
}
</style>


